<template>
  <div>
    <div v-if="!classinfo" class="tips">暂无课程</div>
    <div class="sw" v-if="classinfo">
      <div class="classeswrapper">
        <div class="addwrapper"><i class="el-icon-plus" @click="dialogFormVisible = true"></i></div>
        <div class="classwrapper"  v-for="(item,index) in classinfo" :key="index">
          <div class="imgwrapper">
            <img :src="item.classImg" style="width:100%"/>
          </div>
          <div class="title">
            <p>{{item.className}}</p>
            <span>{{item.introduction}}</span>
          </div>
          <div class="butwrapper">
            <el-button round @click="editClass(item)">编辑课程</el-button>
            <el-button type="danger" round @click="deletewarning(item)">删除课程</el-button>
          </div>
        </div>
        <div class="fenye">
          <el-pagination
            :page-size="paginationClassOption.pageSize"
            layout="prev, pager, next"
            :page-count="paginationClassOption.total"
            :current-page.sync="paginationClassOption.currentPage"
            @current-change="currentclassChange">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 增加课程表单 -->
    <el-dialog title="新增课程" :visible.sync="dialogFormVisible" width='400px'>
      <el-form :model="form" @submit.native.prevent>
        <el-form-item label="课程名称">
          <el-input v-model="form.className" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程等级">
          <el-radio-group v-model="form.classLevel">
            <el-radio :label="item.val" v-for="(item ,index) in level" :key="index">{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="课程类型">
          <el-radio-group v-model="form.classType">
            <el-radio :label="item.val" v-for="(item ,index) in type" :key="index">{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="课程收费">
          <el-radio-group v-model="form.getting">
            <el-radio :label="item.val" v-for="(item ,index) in getting" :key="index">{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="block" v-if="form.getting">
          <span class="w">具体收费</span>
          <el-slider v-model="form.classValue"></el-slider>
        </div>
        <el-form-item label="课程简介">
          <el-input v-model="form.introduction" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程封面">
          <!-- <el-input type="file" class="imgInput" @input="beforeUpload" ref='ins'></el-input>
          <img :src="imageUrl" class="imageUrl"> -->
          <el-upload
            action=""
            :before-upload="beforeUpload"
            class="avatar-uploader"
          >
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addClass">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const uploadImg = require('smms')
export default {
  name: 'myClass',
  data () {
    return {
      classinfo: null,
      dialogFormVisible: false,
      form: {
        className: '',
        classLevel: '',
        classTime: 30,
        classValue: 0,
        classType: '',
        classImg: '',
        introduction: '',
        getting: ''
      },
      formLabelWidth: '80px',
      imageUrl: '',
      imgFile:'',
      level: [
        {
          name: '一级',
          val: 1
        },
        {
          name: '二级',
          val: 2
        },
        {
          name: '三级',
          val: 3
        }
      ],
      type: [
        {
          name: '商务日语',
          val: 1
        },
        {
          name: '口语', 
          val: 2
        },
        {
          name: '听力',
          val: 3
        }
      ],
      getting: [
        {
          name: '免费',
          val: 0
        },
        {
          name: '付费',
          val: 1
        }
      ],
      paginationClassOption:{
        pageSize: 8,
        total: 0,
        currentPage: 1
      }
    }
  },
  inject:['reload'],
  methods: {
    getTeaClass () {
      this.paginationClassOption.currentPage = parseInt(this.$route.query.page)
      console.log('获得信息')
      let path = this.ports.personalCenter.teacher.class + '?page=' + this.$route.query.page
      this.http.get(path, res => {
        console.log(res.data.msg[0].classNo);
        if (res.data.code === 200 && res.status === 200) {
          this.classinfo = res.data.msg
          let derres = res.data.count % 8
          let result = Math.floor(res.data.count / 8 )
          this.paginationClassOption.total = derres === 0 ? result : result + 1
        }
      })
    },
    // 页码改变触发
    currentclassChange(e){
      this.paginationClassOption.currentPage = e
      let page = e
      this.$router.push({path: '/personalCenter/myClass', query: { page }})
    },
    deletewarning (item) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let path = this.ports.classDetail.deleteClass + '/' + item.classNo
        this.http.delete(path,res => {
          if(res.status === 200 && res.data.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.reload()
          } else {
            this.$message({
              type: 'info',
              message: '删除失败，请稍后重试!'
            });
          }
        })
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    beforeUpload (file) {
      console.log(file);
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      } else {
        this.imgFile = file
        this.imageUrl = URL.createObjectURL(file)
      }
    },
    
    addClass () {
      let files = this.imgFile
      uploadImg(files).then(res => {
        this.form.classImg = res.data.url
        console.log(this.from)
        this.http.post(this.ports.classDetail.addClass, this.form, res =>{
          if(res.status === 200 && res.data.code === 200) {
            this.$message({
              type: 'success',
              message: '课程创建完成，请老师尽快填补章节吧'
            })
          } else {
            this.$message({
              type: 'info',
              message: '创建课程失败，请稍后重试!'
            });
          }
          this.reload()
        })
      })
      this.dialogFormVisible = false
    },
    editClass (item) {
      let routeData = this.$router.resolve({
        path: '/editChapter',
        query: { 
          classNo: item.classNo,
        },
      });
      window.open(routeData.href, '_blank');
    }
  },
  mounted: function () {
    this.getTeaClass()
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.getTeaClass()
  }
}
</script>

<style lang="scss" scoped>
  .classwrapper {
    color: #93999f;
    font-size: 12px;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: flex-start;
  }
  .addwrapper{
    width: 80px;
    height: 80px;
    border: 3px solid #5e5e5e;
    color: #5e5e5e;
    border-radius: 15px;
    margin-bottom: 0.5rem;
    text-align: center;
    .el-icon-plus{
      font-size: 40px;
      display: block;
      margin-top: 20px;
    }
  }
  .imgwrapper img {
    border-radius: 8px;
  }
  .imgwrapper {
    width: 180px;
    flex-shrink: 0;
    margin-right: 30px;
  }
  .title {
    // line-height: 20px;
    font-size: 16px;
    font-weight: 700;
    color: #1c1f21;
    width: 400px;
    text-align: left;
    flex-shrink: 0;
    border-bottom: solid 1px #93999f;
  }
  
  .title span{
    font-size: 14px;
    color: #5e5e5e;
    font-weight: 200;
    line-height: 20px;
    display: block;
    margin-top: 20px;
  }
  .button{
    border-bottom: solid 1px #93999f;
  }
  .tips {
    margin-top: 100px;
    color: #5e5e5e;
  }
  .sw {
    margin-bottom: 100px;
  }
  .butwrapper{
    margin-left:30px;
    display: flex;
    align-items: center;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9 !important;
    border-radius: 6px !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    display: block;
  }
  .block{
    width: 100%;
    display: flex;
    height: 38px;
    line-height: 38px;
    margin-bottom: 22px;
    span{
      padding: 0 15px 0 0;
    }
  }
  .el-slider{
    flex: 1;
  }
  .imageUrl{
    border: 1px solid black;
    width: 120px;
    height: auto;
  }
</style>
